本文共 3787 字，大约阅读时间需要 12 分钟。

小程序视频进行分页展示，后端进行分页查询，后端的分页主要使用了PageHelper插件，小程序端通过wx：for对视频集合进行遍历显示。

分页查询的后端代码

1、server的实现类

PageHelper.startPage方法设置页面的当前页数和每页的显示数目。 PageInfo对查询的list数据进行设置。

@Override    public PageResult getAllVideos(Integer page, Integer pageSize) {        PageHelper.startPage(page,pageSize);        List
   
     list = videosMapperCustom.queryAllVideos();        PageInfo
    
      pageList = new PageInfo<>(list);        PageResult pageResult = new PageResult();        pageResult.setPage(page);        pageResult.setTotal(pageList.getPages());        pageResult.setRecords(pageList.getTotal());        pageResult.setRows(list);        return pageResult;    }
    
   

2、controller类

@ApiOperation(value = "分页查询",notes = "分页查询的接口")    @PostMapping(value = "/showAll")    public IMoocJSONResult showAll(Integer page,Integer pageSize){        if (page == null) {            page = 1;        }        PageResult pageResult = videoService.getAllVideos(page,PAGE_SIZE);        return IMoocJSONResult.ok(pageResult);    }

小程序端代码

index.wxml

         
            
          
         
             
                
                 
      
       {
  {item.nickname}}
               
          
     
   

index.wxss

.item-container {  position:relative;}.cover {  width: 100%;  height: 400rpx;  display: block;}.back-img{  display: block;  background-color: black;}.desc{  margin-top: -40rpx;  margin-bottom: 10rpx;  display: flex;  align-items: center;}.desc .right{   display: flex;   flex-direction: column;   align-items: center;}.desc .faceName {   display: flex;   flex-direction: column;   align-items: center;   margin-left:  10px;}.title {   font-size: 30rpx;   margin-top: 10rpx;   margin-left: 20rpx;   width: 600rpx;}.myface {   display: block;   width: 60rpx;   height: 60rpx;   border-radius:  30rpx;   margin-top: 10rpx;   margin-right:  20rpx;}.nickname {   font-size: 20rpx;   margin-top: 6rpx;   margin-right: 20rpx;   color:darkgray;}

index.js

//index.js//获取应用实例const app = getApp()Page({  data: {    screenWidth: 350,    //分页的属性    totalPage: 1,    page: 1,    videoList: [],    serverUrl: ""  },  onLoad: function (params) {    var me = this;    //获取设备系统信息的同步api    var screenWidth  = wx.getSystemInfoSync().screenWidth;    me.setData({      screenWidth: screenWidth,    });    //获取当前分页数    var page = me.data.page;     me.getAllVideoList(page);  },   getAllVideoList: function (page){     var me = this;     var serverUrl = app.serverUrl;     wx.showLoading({       title: '请等待，加载中...',     });     wx.request({       url: serverUrl + '/video/showAll?page=' + page,       method: "POST",       success: function (res) {         wx.hideLoading();         wx.hideNavigationBarLoading();         wx.stopPullDownRefresh();                  console.log(res.data);         //判断当前页page是否是第一页，如果是第一页，那么设置videoList为空         if (page === 1) {           me.setData({             videoList: []           });         }         //页面数据拼接         var videoList = res.data.data.rows;         var newVideoList = me.data.videoList;         me.setData({           videoList: newVideoList.concat(videoList),           page: page,           totalPage: res.data.data.records,           serverUrl: serverUrl         })             }     })   },})

用户上拉事件，

//用户上拉事件  onReachBottom: function () {    var me = this;    var currentPage = me.data.page;    var totalPage = me.data.totalPage;    // 判断当前页数和总页数是否相等，如果想的则无需查询    if (currentPage === totalPage) {      wx.showToast({        title: '已经没有视频啦~~',        icon: "none"      })      return;    }    var page = currentPage + 1;    me.getAllVideoList(page);  },

用户下拉事件，页面重新加载第一页，并且需要在index.json中进行下拉事件开启配置：

{  "enablePullDownRefresh":true,  "backgroundTextStyle":"dark"}

onPullDownRefresh:function(){     wx.showNavigationBarLoading();     this.getAllVideoList(1);   },

转载地址：http://ojfoi.baihongyu.com/